/**
 * 资金充值页面组件
 * 功能：展示和管理资金充值记录，包括充值统计、查询筛选和记录查看
 * 特点：包含统计信息、查询功能、状态标签和模拟数据展示
 * 技术：使用React函数组件、Ant Design UI组件、状态管理和模拟数据
 */

import React, { useState, useEffect } from 'react';
import {
  Card,
  Table,
  Button,
  Space,
  message,
  Tag,
  Row,
  Col,
  Statistic,
  DatePicker,
  Form,
  Input
} from 'antd';
import {
  ReloadOutlined,
  SearchOutlined
} from '@ant-design/icons';
import dayjs from 'dayjs';

const { RangePicker } = DatePicker;

/**
 * 充值记录接口定义
 * 描述资金充值记录的数据结构
 */
interface RechargeRecord {
  id: number;                    // 记录唯一标识
  orderNo: string;               // 订单编号
  amount: number;                // 充值金额
  currency: string;              // 货币类型
  status: string;                // 状态：completed(已完成)、pending(处理中)、failed(失败)
  paymentMethod: string;         // 支付方式：bank_transfer(银行转账)、credit_card(信用卡)等
  createdAt: string;             // 创建时间
  completedAt: string;           // 完成时间
}

/**
 * 资金充值主组件
 * React函数组件，使用FC（Function Component）类型定义
 */
const FundRecharge: React.FC = () => {
  // 使用React的useState Hook管理组件状态
  const [loading, setLoading] = useState(false);              // 加载状态，控制表格加载动画
  const [records, setRecords] = useState<RechargeRecord[]>([]); // 充值记录列表数据
  const [totalAmount, setTotalAmount] = useState(0);          // 总充值金额

  // 查询参数状态
  const [queryParams, setQueryParams] = useState({
    dateRange: null as [dayjs.Dayjs | null, dayjs.Dayjs | null] | null, // 日期范围选择
    orderNo: '',     // 订单号搜索
    status: ''       // 状态筛选
  });

  /**
   * 模拟充值记录数据
   * 在实际应用中，这些数据应该从API接口获取
   */
  const mockRecords: RechargeRecord[] = [
    {
      id: 1,
      orderNo: 'RCH202401200001',
      amount: 1000,
      currency: 'USD',
      status: 'completed',
      paymentMethod: 'bank_transfer',
      createdAt: '2024-01-20T10:30:00Z',
      completedAt: '2024-01-20T10:35:00Z'
    },
    {
      id: 2,
      orderNo: 'RCH202401190002',
      amount: 500,
      currency: 'USD',
      status: 'completed',
      paymentMethod: 'credit_card',
      createdAt: '2024-01-19T14:20:00Z',
      completedAt: '2024-01-19T14:25:00Z'
    },
    {
      id: 3,
      orderNo: 'RCH202401180003',
      amount: 2000,
      currency: 'USD',
      status: 'pending',
      paymentMethod: 'bank_transfer',
      createdAt: '2024-01-18T09:15:00Z',
      completedAt: ''
    }
  ];

  /**
   * 获取充值记录数据
   * 模拟API调用，使用setTimeout模拟网络请求延迟
   */
  const fetchRechargeRecords = async () => {
    setLoading(true); // 开始加载，显示加载动画
    try {
      // 模拟API调用，实际项目中应替换为真实的API请求
      setTimeout(() => {
        setRecords(mockRecords); // 设置充值记录数据
        setTotalAmount(mockRecords.reduce((sum, record) => sum + record.amount, 0)); // 计算总金额
        setLoading(false);       // 加载完成，隐藏加载动画
      }, 500);
    } catch (error) {
      console.error('获取充值记录失败:', error);
      message.error('获取充值记录失败'); // 显示错误提示
      setLoading(false);
    }
  };

  /**
   * 使用useEffect Hook在组件挂载时获取数据
   * 空依赖数组[]表示只在组件首次渲染时执行
   */
  useEffect(() => {
    fetchRechargeRecords();
  }, []);

  /**
   * 表格列配置
   * 定义表格的列显示、渲染方式和操作按钮
   */
  const columns = [
    {
      title: '订单号',
      dataIndex: 'orderNo',
      key: 'orderNo'
    },
    {
      title: '金额',
      dataIndex: 'amount',
      key: 'amount',
      // 自定义渲染，显示金额和货币类型，加粗显示
      render: (amount: number, record: RechargeRecord) => (
        <span style={{ fontWeight: 'bold' }}>
          {amount} {record.currency}
        </span>
      )
    },
    {
      title: '支付方式',
      dataIndex: 'paymentMethod',
      key: 'paymentMethod',
      // 支付方式映射，将代码转换为中文显示
      render: (method: string) => {
        const methodMap: { [key: string]: string } = {
          bank_transfer: '银行转账',
          credit_card: '信用卡',
          digital_wallet: '数字钱包'
        };
        return methodMap[method] || method; // 返回映射后的名称或原值
      }
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      // 状态标签渲染，根据状态显示不同颜色
      render: (status: string) => (
        <Tag color={status === 'completed' ? 'green' : status === 'pending' ? 'orange' : 'red'}>
          {status === 'completed' ? '已完成' : status === 'pending' ? '处理中' : '失败'}
        </Tag>
      )
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      key: 'createdAt',
      // 格式化时间显示
      render: (text: string) => new Date(text).toLocaleString()
    },
    {
      title: '完成时间',
      dataIndex: 'completedAt',
      key: 'completedAt',
      // 完成时间显示，为空时显示横线
      render: (text: string) => text ? new Date(text).toLocaleString() : '-'
    }
  ];

  return (
    <div className="p-6">
      <Card>
        {/* 统计信息卡片区域 */}
        <Row gutter={[16, 16]} style={{ marginBottom: 24 }}>
          <Col span={8}>
            <Card>
              <Statistic
                title="总充值金额"
                value={totalAmount}
                precision={2}
                valueStyle={{ color: '#3f8600' }} // 绿色显示
                prefix="$"
              />
            </Card>
          </Col>
          <Col span={8}>
            <Card>
              <Statistic
                title="充值次数"
                value={records.length}
              />
            </Card>
          </Col>
          <Col span={8}>
            <Card>
              <Statistic
                title="成功率"
                value={(records.filter(r => r.status === 'completed').length / records.length * 100).toFixed(1)}
                precision={1}
                valueStyle={{ color: '#3f8600' }} // 绿色显示
                suffix="%"
              />
            </Card>
          </Col>
        </Row>

        {/* 查询表单区域 */}
        <Card style={{ marginBottom: 16 }}>
          <Form layout="inline">
            <Form.Item label="时间范围">
              <RangePicker
                value={queryParams.dateRange}
                onChange={(dates) => setQueryParams(prev => ({ ...prev, dateRange: dates }))}
              />
            </Form.Item>
            <Form.Item label="订单号">
              <Input
                placeholder="请输入订单号"
                value={queryParams.orderNo}
                onChange={(e) => setQueryParams(prev => ({ ...prev, orderNo: e.target.value }))}
              />
            </Form.Item>
            <Form.Item>
              <Space>
                <Button type="primary" icon={<SearchOutlined />}>
                  查询
                </Button>
                <Button icon={<ReloadOutlined />} onClick={fetchRechargeRecords}>
                  刷新
                </Button>
              </Space>
            </Form.Item>
          </Form>
        </Card>

        {/* 充值记录表格 */}
        <Table
          loading={loading}           // 加载状态
          columns={columns}           // 列配置
          dataSource={records}        // 数据源
          rowKey="id"                 // 行唯一标识
          pagination={{               // 分页配置
            pageSize: 10,
            showSizeChanger: true,    // 显示每页条数选择器
            showQuickJumper: true,    // 显示快速跳转
            showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条`
          }}
        />
      </Card>
    </div>
  );
};

export default FundRecharge;